// 算法步骤可视化组件

class StepVisualizer {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        // 如果容器不存在则创建一个
        if (!this.container) {
            this.container = document.createElement('div');
            document.body.appendChild(this.container);
        }
    }
    
    // 清空容器
    clear() {
        if (this.container) {
            this.container.innerHTML = '';
        }
    }
    
    // 绘制步骤信息
    drawStep(step) {
        // 清空容器
        this.clear();
        
        if (!this.container) {
            console.error('容器元素不存在');
            return;
        }
        
        // 创建步骤信息容器
        const stepElement = document.createElement('div');
        stepElement.className = 'step-visualization';
        
        // 添加标题
        const title = document.createElement('h3');
        title.textContent = `步骤详情`;
        stepElement.appendChild(title);
        
        // 添加详细信息
        const details = document.createElement('div');
        details.className = 'step-details';
        
        // 添加迭代次数
        if (step.iteration !== undefined) {
            const iteration = document.createElement('p');
            iteration.innerHTML = `<strong>迭代次数:</strong> ${step.iteration}`;
            details.appendChild(iteration);
        }
        
        // 添加动作
        if (step.action) {
            const action = document.createElement('p');
            action.innerHTML = `<strong>动作:</strong> ${step.action}`;
            details.appendChild(action);
        }
        
        // 添加阻塞对数量
        if (step.blocking_pairs !== undefined) {
            const blockingPairs = document.createElement('p');
            blockingPairs.innerHTML = `<strong>阻塞对数量:</strong> ${step.blocking_pairs}`;
            details.appendChild(blockingPairs);
        }
        
        // 添加已匹配货物数
        if (step.matched_shipments !== undefined) {
            const matchedShipments = document.createElement('p');
            matchedShipments.innerHTML = `<strong>已匹配货物数:</strong> ${step.matched_shipments}`;
            details.appendChild(matchedShipments);
        }
        
        stepElement.appendChild(details);
        
        // 添加到容器
        this.container.appendChild(stepElement);
    }
}

// 导出StepVisualizer类（如果在模块环境中）
if (typeof module !== 'undefined' && module.exports) {
    module.exports = StepVisualizer;
}